import { Outlet,Link,useLocation } from "react-router-dom";
import { routerlist } from "../router/index";
import { Layout,Menu ,Button} from "antd";
const { Header, Content, Footer,Sider } = Layout;
import Theme from "../computed/Theme";
import { useTranslation } from 'react-i18next';


export const god=(routes)=>{
    const { t, i18n } = useTranslation();
    
    return routes.map(route=>{
        const meneItem={
            label:t(route.meta.title),
            key:route.path
        }
        if(route.children){
            return {
                ...meneItem,
                children:god(route.children)
            }
            
        }
        return {
            ...meneItem,
            label:<Link to={route.path}>{t(route.meta.title)}</Link>
        }
    })
}

export default function Layouts(){
    const Location=useLocation()
    const { t, i18n } = useTranslation();
    const qieh=()=>{
        i18n.changeLanguage(i18n.language==='zh'?'en':'zh')
    }
    return (
        <Layout>
            <Sider style={{minHeight:'100vh'}} collapsible='true'>
                <Menu theme="dark" mode="inline" selectedKeys={[Location.pathname]} items={god(routerlist)} />
            </Sider>
            <Layout>
                <Header style={{backgroundColor:'var(--background-color)',color:'var(--text-color)',height:'40px',lineHeight:'40px',display:'flex',justifyContent:'flex-end',alignContent:'center'}}>
                    <Button onClick={qieh}>{i18n.language==='zh'?'英文':'中文'}</Button>
                    <Theme />
                    <div style={{display:'flex',justifyContent:'center',alignContent:'center'}}>{localStorage.getItem('token')?<div>
                        
                        <img style={{width:'30px',borderRadius:'50%'}} src="https://ts1.tc.mm.bing.net/th/id/OIP-C.-r8TdWtF72EheUNjt_uKvwAAAA?w=203&h=211&c=8&rs=1&qlt=70&o=7&cb=thws5&dpr=1.3&pid=3.1&rm=3" alt="" />
                        <span>用户:jykl</span>
                        
                    </div>:''}</div>
                </Header>
                <Content style={{backgroundColor:'var(--background-color)',color:'var(--text-color)'}}>
                <Outlet />
            </Content>
            </Layout>
            
        </Layout>
    )
}